<template>
  <view class="application-list">
    <view class="application-item" v-for="(item, index) in appliCationList" :key="item.id">
      <!-- 申请类型和编号 -->
      <view class="item-header">
        <view class="type-box">
          <text class="type-text">{{ getTypeName(item.type) }}</text>
          <text class="number">#{{ item.id }}</text>
        </view>
          <text :class="['status', getStatus(item.approvalStatus).className]">{{ getStatus(item.approvalStatus).text }}</text>
      </view>
      <!-- 申请信息 -->
      <view class="item-info">
        <view class="info-row">
          <text class="label">申请人:</text>
          <text class="value">[{{ item.deptName }}] - {{ item.employeeName}}</text>
        </view>
        <view class="info-row">
          <text class="label time">申请时间:</text>
          <!--item.applyTime  -->
          <text class="value">{{formatTime(item.applyTime)}}</text>
        </view>
        <view class="info-row" v-if="item.approvalStatus === 2">
          <text class="label time" style="color: #2b7ff3;">销假状态:</text>
          <text class="value" style="color: #2b7ff3;">{{JudgeRevokeStatus(item.revokeStatus)}}</text>
        </view>
      </view>
      <!-- 这部分添加逻辑判断 -->
      <view class="item-actions">
        <!-- 添加申请销假和申请 -->
        <view class="action-btn edit" @tap="editItem(item)"><uni-icons type="compose"></uni-icons>修改</view>
        <view class="action-btn detail" @tap="viewDetail(item)"><uni-icons type="eye"></uni-icons>查看详情</view>
        <view class="action-btn delete" @tap="deleteItem(item)"><uni-icons type="trash"></uni-icons>删除</view>
      </view>
    </view>
  </view>
</template>

<script>
import {exposeFormatTime} from '@/utils/format.js'
export default {
  name: 'ApplicationList',
  props: {
    appliCationList: {
      type: Array,
      required: true
    }
  },
  methods: {
  getStatus(status) {
    switch (status) {
        case 1:
          return { text: '部门审批中', className: 'status-pending' };
        case 2:
          return { text: '部门审批批准', className: 'status-approved' };
        case 3:
          return { text: '部门驳回审批', className: 'status-rejected' };
        default:
          return { text: '部门未审批', className: 'status-not-approved' };
      }
    },
    getTypeName(type) {
      switch(type) {
        case 1:
          return '请假审批';
        case 2: 
          return '出差审批';
        case 3: 
          return '培训审批';
      }
    },
    editItem(item) {
      this.$emit('edit', item);
    },
    viewDetail(item) {
      this.$emit('view-detail', item);
    },
    deleteItem(item) {
      this.$emit('delete', item);
    },
    formatTime(dataStr){
      return exposeFormatTime(dataStr)
    },
    // 针对销假状态的方法
    JudgeRevokeStatus(dataStr) {
      switch(dataStr) {
        case 0:
          return '未销假'
        case 1:
          return '申请销假中'
        case 2:
          return '已销假'
        case 3:
          return '销假已超时'
      }
    },
  }
};
</script>

<style scoped lang="scss">
  .application-list {
    margin-top: 20rpx;
    .application-item {
      background-color: #fff;
      border-radius: 10rpx;
      padding: 20rpx 20rpx 20rpx 30rpx;
      margin: 20rpx 20rpx;
      position: relative; // 相对定位
      // 添加左侧蓝条
      &::before {
        content: '';
        position: absolute;
        left: 0rpx; // 向右偏移，确保在内部
        top: 50%; // 垂直居中
        transform: translateY(-50%); // 垂直居中调整
        width: 10rpx; // 蓝条宽度
        height: 100%; // 高度设为80%，不会太长
        background-color: #2b7ff3; // 蓝色竖条
        border-radius: 10rpx; // 圆角
      }
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .type-box {
          display: flex;
          align-items: center;
          .type-text {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          .number {
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #999;
            background-color: rgba(44, 49, 60, 0.05);
            padding: 2rpx 10rpx;
          }
        }
        // 之后可以整个自定的背景颜色
        .status {
          font-size: 24rpx;
          // background-color: rgba(43, 127, 243,0.1);
          padding: 5rpx 12rpx;
          border-radius: 4rpx;
          margin-right: -20rpx;
          margin-top: -41rpx;
        }
        .status-pending {
          color: #2b7ff3;
          background-color: rgba(43, 127, 243,0.1);
        }
        .status-approved {
          color: #fe73a2;
          background-color: rgba(254, 115, 162,0.1);
        }
        .status-rejected {
          color: #ed0000;
          background-color: rgba(237, 0, 0,0.1);
        }
        .status-not-approved {
          color: #00b578;
          background-color: rgba(0, 181, 120,0.1);
        }
      }
      .item-info {
        margin-bottom: 20rpx;
        .info-row {
          padding: 5rpx;
          margin-left: 10rpx;
          .label {
            color: #999;
            margin-right: 30rpx;
            font-size: 25rpx;
            &.time {
              margin-right: 10rpx;
            }
          }
          .value {
            color: #333;
            font-size: 25rpx;
            font-weight: bold;
          }
        }
      }
      
      .item-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;
        
        .action-btn {
          margin-left: 20rpx;
          font-size: 24rpx;
          border-radius: 4rpx;
          display: flex;
          padding: 5rpx 10rpx;
          &.edit {
            background: rgba(242, 242, 242,1);
          }
          &.detail {
            background: rgba(242, 242, 242,1);
          }
          &.delete {
            background: rgba(242, 242, 242,0.6);
            color: #999;
          }
        }
        
      }
    }
  }
</style>